<template>
  <div>
    <Table border :columns="columns" :data="order" size="large" no-data-text="你还没有订单，快点去购物吧"></Table>
    <div class="page-size">
      <template>
          <Page :total="total" :page-size="pageSize" prev-text="Previous" next-text="Next" @on-change="change" />
      </template>
    </div>

<!--    订单详情模态框-->
    <Modal
      v-model="oDetailActive"
      title="订单详情"
    >
      <Table :columns="detailCol" :data="odList"></Table>
      <div slot="footer"></div>
    </Modal>

  </div>
</template>

<script>
  export default {
    name: 'MyOrder',
    data() {
      return {
        order: [],
        orderTotal: 0,//订单数量
        oDetailActive: false,
        detailIndex: 0,
        orderDetail: [],//订单详情
        odList: [],//展示的订单详情
        total:10,
        pageNo: 1,
        pageSize:10,
        columns: [{
            title: '订单号',
            key: 'id',
            align: 'center'
          },
          {
            title: '商品总价',
            key: 'amount',
            align: 'center'
          },
          {
            title: '下单时间',
            key: 'create_time',
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'clipboard' // iview自带的删除icon
                  },
                  style: {
                    fontSize: '28px', // 改变icon的样式
                    color: '#559DF9'
                  },
                  on: {
                    click: () => {
                      this.getDetail(params)
                    }
                  }
                })
              ])
            }
          },
        ],
        detailCol: [
            {
              title: '产品名称',
              key: 'name',
              align: 'center'
            },
            {
              title: '数量',
              key: 'number',
              align: 'center'
            },
            // {
            //   title: '单价',
            //   key: 'price',
            //   align: 'center'
            // },
        ],
      };
    },
    methods:{
      getDetail(params) {
        this.oDetailActive = true
        let num = 0
        for (let i = 0; i < params.index;i++) {
          num += this.order[i].number
        }
        this.odList = Object.assign([], this.orderDetail)
        this.odList = this.odList.splice(num, this.order[params.index].number)
      },
      // 获取订单信息
      getData() {
        const _this = this
        let user = sessionStorage.getItem('loginInfo');
        let userinfo = (JSON.parse(user));

        this.$http.get('/orderList/getOrderInfo/'+userinfo.id)
          .then(resp => {
            const res = resp.data.data

            _this.order[_this.orderTotal] = {
              id: res[0].id,
              amount:  res[0].amount,
              create_time: res[0].create_time,
              number: 0
            }

            let index = res[0].id
            let detalSum = 0
            for (let i = 0; i < res.length;i++) {
              _this.orderDetail[detalSum] = {
                name: res[i].name,
                number: res[i].number,
                // price: 0
              }

              if (res[i].id === index) {
                _this.order[_this.orderTotal].number++
              } else {
                index = res[i].id
                _this.orderTotal++
                _this.order[_this.orderTotal] = {
                  id: res[i].id,
                  amount:  res[i].amount,
                  create_time: res[i].create_time,
                  number: 1
                }
              }
            }

            _this.order = JSON.parse(JSON.stringify(_this.order))

          })
      },
      change(current) {
        this.pageNo = current;
        this.getData();
      }
    },
    created() {
     this.getData();
    }
  };
</script>

<style scoped>
  .page-size {
    margin: 15px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
</style>
